<template>
  <c-main-template
    minHeight="auto"
    :isBreadcrumb="false"
    class="mt-lg ml-lg mr-lg"
  >
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">订单号：</div>
          <el-input
            size="large"
            placeholder="请输入订单号"
            v-model="querys.id"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车辆信息：</div>
          <el-input
            size="large"
            placeholder="请输入车辆信息"
            v-model="querys.productInfo"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">买家企业名称：</div>
          <el-input
            size="large"
            placeholder="请输入买家企业名称"
            v-model="querys.buyerName"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>

      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>

      <el-col :span="7" class="mt-lg">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.pickupStatus"
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in deliveryOfVehicleType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-lg"
    minHeight="auto"
    title="提车申请"
    :isBreadcrumb="false"
  >
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column
        label="提车申请号"
        prop="id"
        align="center"
        width="200"
      />
      <el-table-column
        label="订单号"
        prop="orderId"
        align="center"
        width="200"
      />
      <el-table-column
        label="车辆信息"
        prop="productInfo"
        align="center"
        min-width="250"
      />
      <el-table-column label="单价" align="center" width="200">
        <template #default="scope">
          <span>{{ scope.row.productCurrency }}</span>
          <span class="ml-sm">{{
            filters.thousands(scope.row.productPrice)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" width="100">
        <template #default="scope">
          <span>{{ scope.row.productAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总计金额" align="center" width="200">
        <template #default="scope">
          <span>{{ scope.row.productCurrency }}</span>
          <span class="ml-sm">{{
            filters.thousands(scope.row.productSumPrice)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="买家企业名称"
        prop="buyerName"
        align="center"
        width="200"
      />
      <el-table-column label="状态" align="center" width="150">
        <template #default="scope">
          {{ getStatusLabel(deliveryOfVehicleType, scope.row.pickupStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scope">
          <el-button
            v-if="scope.row.isRepaymentLoan"
            type="primary"
            size="small"
            link
            @click="handleRepaymentLoan(scope.row)"
          >
            <span>贷款还款</span>
          </el-button>
          <el-button
            v-if="scope.row.pickupStatus === 0"
            type="primary"
            size="small"
            link
            @click="handleVerify(scope.row)"
          >
            <span>确认</span>
          </el-button>
          <el-button
            v-if="scope.row.pickupStatus !== 0"
            type="primary"
            size="small"
            link
            @click="handleDetails(scope.row)"
          >
            <span>详情</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { deliveryOfVehicleType, getStatusLabel } from "@/utils/status.js";
import { ElMessageBox, ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
onMounted(() => {
  const item = route.query;
  if (item && item.id) {
    querys.value.id = item.id;
    delete route.query.id;
  }
});

const handleDetails = (item) => {
  router.push({
    path: "/DeliveryOfVehicle/Details",
    query: {
      id: item.id,
    },
  });
};
const handleRepaymentLoan = (item) => {
  router.push({
    path: "/Loan",
    query: {
      key: 0,
      orderId: item.orderId,
    },
  });
};
const handleVerify = (item) => {
  ElMessageBox.confirm("是否确认提车？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      loading.value = true;
      const url = `/buyerPickupApply/confirm/seller?id=${item.id}`;
      await proxy.$get({ url });
      ElMessage.success("操作成功");
      loading.value = false;
      tableList();
    } catch (error) {
      loading.value = false;
    }
  });
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
  handleReset,
} = useBasicsTable({
  url: "/buyerPickupApply/sellerPickupPage",
});
</script>